<template>
  <div class="boss">
    <header><Header /></header>
    <section>
      <aside>
        <MyAside />
      </aside>
      <main>
        <Breadcrumb />
        <!-- <Main/> -->
        <router-view></router-view>
      </main>
    </section>
  </div>
</template>

<script>
import Header from "./components/Header";
import MyAside from "./components/MyAside";
import Main from "./components/Main";
import Breadcrumb from "./components/Breadcrumb";
export default {
  name: "HomeLayouts",
  components: { Header, MyAside, Main, Breadcrumb },
};
</script>

<style lang="scss" scoped>
.boss {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    flex-shrink: 0;
  }
  section {
    height: 100%;
    display: flex;
    justify-items: center;
    aside {
      width: 200px;
      height: 100%;
      overflow: auto;
    }
    main {
      flex: 1;
      height: 100%;
      overflow: auto;
    }
  }
}
</style>